$compact-width: 50px;

.plan-node {
  cursor: default;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-size: $fontSizeSm;
  margin-bottom: 4px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  width: 240px;

  @include themify() {
    color: themed($color) !important;
  }

  .plan-node-body {
    position: relative;
    border-radius: $borderRadius;
    border: 1px solid #4865a1;

    &.card {
      @include themify() {
        background-color: themed($pev2PlanNodeHeader) !important;
      }

      .card-header {
        margin: 0 $spaceLg;
        padding: $spaceLg 0 5px;
        border-top: 1px solid rgba(29, 39, 59, 0.6) !important;
        border-bottom: 1px solid rgba(29, 39, 59, 0.6) !important;

      }

      .card-body {
        padding: $spaceBase $spaceLg;
      }

      .card-body, .card-header {
        @include themify() {
          background-color: themed($pev2PlanNodeHeader) !important;
        }

        .table {
          border-radius: $borderRadius;
          overflow: hidden;

          @include themify() {
            background-color: themed($tabsSurfaceBg) !important;
            color: themed($color) !important;
          }

          td, th {
            border-top: none;
            @include themify() {
              border-bottom: themed($border) !important;
            }
          }
        }
      }

      .card-header .card-header-tabs {
        margin: $spaceBase 0;
    
        .nav-link {
          border: 0 !important;
          padding: 0 0.5rem;
          border-radius: $borderRadius;
        
          @include themify() {
            color: themed($color);
          }

          &.disabled {
            color: $primaryMutedColor;
          }

          &.active {
            background: $primaryBlue !important;
            color: white;
          }

          &:hover:not(.active) {
            color: inherit;
          }
        }
      }
    }

    a {
      color: map-get($severity-colors, 3);
      font-size: 100%;
      margin-right: $spaceSm;
      font-weight: 600 !important;
    }
  }

  &.parallel .plan-node-body {
    box-shadow: none;
  }

  header {
    overflow: hidden;

    h4 {
      font-size: $fontSizeBase;
      font-weight: 600;
      margin: 0;
      line-height: inherit;
      border: 0 !important;

      @include themify() {
        color: themed($color) !important;
        background: transparent;
      }

      &:active, &:focus {
        background-color: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
      }
    }

    .node-duration {
      float: right;
      margin-left: $spaceLg;
      font-size: $fontSizeBase;
    }
  }

  .prop-list {
    color: inherit;
    // required for overflow-wrap to be taken into account
    table-layout: fixed;
  }

  &.selected {
    transition: all .3s ease-in;

    .plan-node-body {
      border-color: $primaryBlue;
      box-shadow: 0px 0px 9px 6px rgba($primaryBlue, .2);
    }

    .workers > div {
      border-color: rgba($primaryBlue, .2);
    }
  }

  .node-description {
    text-align: left;
    font-style: italic;
    word-break: normal;

    .node-type {
      font-weight: 600;
      background-color: $blue;
      color: #fff;
      padding: 0 $spaceBase;
    }
  }

  .btn-default {
    border: 0;
  }

  .plan-query-container {
    border: 1px solid $lineColor;
    padding: $spaceXl;
    background-color: #fff;
    position: absolute;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    border-radius: $borderRadius;
    margin-bottom: $spaceXl;
    z-index: 1;
    left: 0;

    h3 {
      font-size: $fontSizeLg;
      width: 93%;
      text-align: left;
      border-bottom: 1px solid $lineColor;
      padding-bottom: $spaceBase;
      margin-bottom: $spaceLg;
    }
  }

  &.never-executed .plan-node-body {
    @extend %bg-hatched;
  }

  .workers {
    position: absolute;
    left: -1px;
    top: 1px;
    width: 100%;
    height: 100%;
    cursor: pointer;

    > div {
      border: 1px solid $grayLight;
      border-radius: $borderRadius;
      background-color: $white;
      width: 100%;
      height: 100%;
      position: absolute;
    }
  }

  .workers-handle {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: -5px;
    > div {
      position: absolute;
      top: 0;
      background-color: white;
      border: 1px solid darken($grayLightest, 3);
      border-radius: $borderRadius;

      &:hover {
        background-color: $grayLightest;
        border-color: $grayLight;
      }
    }
  }

  .subplan-name {
    background-color: #B3D7D7;
    border-radius: $borderRadius;
  }

  button {
    .fa-chevron-right {
      display: inline-block;
    }
    .fa-chevron-down {
      display: none;
    }
  }
  button[aria-expanded='true'] {
    .fa-chevron-right {
      display: none !important;
    }
    .fa-chevron-down {
      display: inline-block !important;
    }
  }

  &.plan-node-detail .text-truncate {
    overflow: initial;
    white-space: initial;
    text-overflow: initial;
  }
}

.node-bar-container {
  height: 5px;
  margin-top: $spaceLg;
  margin-bottom: $spaceSm;
  border-radius: $borderRadius;
  position: relative;
  background: $white;

  .node-bar {
    border-radius: $borderRadius;
    height: 100%;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.node-bar-label {
  text-align: left;
  display: block;
}

.detailed {
  width: 400px !important;
}

.stat-value {
  font-size: 0.75rem;
  margin: 4px;
}
